<div>
    <ui-prop>
        <ui-label slot="label" tooltip="事件名">Event Name</ui-label>
        <ui-select slot="content" @change="onEventTypeChange" :value="eventType" ref="eventTypeSelect">
            <option value="1">界面显示</option>
            <option value="2">界面隐藏</option>
            <option value="3">自定义</option>
        </ui-select>
    </ui-prop>

    <ui-prop type="dump" ref="eventDump" v-show="eventType == 3"></ui-prop>
    <ui-prop type="dump" ref="durationDump"></ui-prop>
    <div v-show="false" v-for="t in actionTypeKeyOnly" :key="t">
        <ui-prop type="dump" ref="propDums"></ui-prop>
    </div>

    <div v-for="(actionProp, i) in actionProps" :key="i">
        <action-prop :actionProp="actionProp" :actionType="actionTypeKeyOnly[i]" :open="!!(actionFlag & (1 << i))"
            @onOpenChange="onOpenChange(i, $event)" @onPropTypeChange="onPropTypeChange(i, $event)"
            @onValueTypeChange="onValueTypeChange(i, $event)">
        </action-prop>
    </div>

    <ui-section header="高级设置" expand>
        <ui-prop type="dump" ref="delayDump"></ui-prop>
        <ui-prop type="dump" ref="resetDump"></ui-prop>
        <ui-prop type="dump" ref="easingDump"></ui-prop>
        <ui-prop type="dump" ref="nextActionNodesDump"></ui-prop>
    </ui-section>

    <div style="display: flex; padding-top: 10px; border-top: 1px solid var(--color-normal-border);">
        <ui-button @click="onRecordClick" class="red" tooltip="record">
            <ui-icon value="import"></ui-icon>
            <span>record</span>
        </ui-button>
        <ui-button @click="onRecoverClick" class="green" tooltip="reset" style="margin-left: auto;">
            <ui-icon value="reset"></ui-icon>
            <span>recover</span>
        </ui-button>
        <ui-button @click="onPreviewClick" class="blue" tooltip="play" style="color:whitesmoke; margin-left: auto;">
            <ui-icon value="play"></ui-icon>
            <span>play</span>
        </ui-button>
    </div>
</div>